<template>
  <fks-dialog
    width="750px"
    :visible.sync="dialogVisible"
    @close="close"
    title="上传工程"
  >
    <div class="upload">
      <fks-tabs v-model="activeName">
        <fks-tab-pane label="自动上传" name="auto">
          <!-- 自动上传 -->
          <div class="auto">
            <div class="uploadMask">
              <span>点击上传ue附件（zip格式）</span>
              <input
                class="uploadInput"
                ref="fileInput"
                type="file"
                @change="handleFileChange"
              />
            </div>
          </div>
        </fks-tab-pane>
        <fks-tab-pane label="手动上传" name="hand">
          <!-- 手动上传 -->
          <div class="hand">
            <fks-table :data="tableData" height="400" style="width: 100%">
              <fks-table-column prop="name" label="文件名" width="180">
              </fks-table-column>
              <fks-table-column prop="size" label="文件大小" width="180">
                <template slot-scope="scope">
                  {{ fileSize(scope.row.size) }}
                </template>
              </fks-table-column>
              <fks-table-column prop="createdAt" label="上传时间">
              </fks-table-column>
              <fks-table-column label="操作">
                <template slot-scope="scope">
                  <fks-button
                    type="text"
                    size="small"
                    @click="deploy(scope.row)"
                  >
                    部署
                  </fks-button>
                </template>
              </fks-table-column>
            </fks-table>
          </div>
        </fks-tab-pane>
      </fks-tabs>
    </div>
    <div class="footer">
      <!-- 上传进度 -->
      <div class="progress">
        <div v-if="uploading || !mergeProgress.status || !unzipProgress.status">
          {{ progressTitle }}
        </div>
        <fks-progress
          v-if="uploading || !mergeProgress.status || !unzipProgress.status"
          style="flex: 1; height: 100%; display: flex; align-items: center"
          :percentage="progressData"
          :text-inside="true"
          :stroke-width="20"
        ></fks-progress>
      </div>
      <fks-button type="primary" @click="close" style="width: 120px;">
        <span>退出</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import { getLocalUefile } from "../apis/index";
import useUefileUpload from "../hooks/useUefileUpload";
import { formatBytes } from "../utils/index";
export default {
  name: "addDialog",
  setup() {
    const {
      uploading,
      progress,
      mergeProgress,
      unzipProgress,
      uploadFileChunks,
      deployUefile,
      deployFlag,
    } = useUefileUpload();
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        uploadFileChunks(file, (res) => {
          console.log("combineRes", res);
          const fileName = res.originalFilename.split(".")[0];
          const data = {
            fileName: fileName || "ueproject",
            filePath: res.path,
          };
          deployUefile(data);
        });
      }
    };

    return {
      uploading,
      progress,
      mergeProgress,
      unzipProgress,
      handleFileChange,
      deployUefile,
      deployFlag,
    };
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
      submitLoading: false,
      activeName: "auto",
      tableData: [],
    };
  },
  computed: {
    progressData() {
      if (this.uploading) {
        return parseInt(this.progress);
      } else if (!this.mergeProgress.status) {
        return parseInt(this.mergeProgress.data);
      } else if (!this.unzipProgress.status) {
        return parseInt(this.unzipProgress.data);
      } else {
        return 0;
      }
    },
    progressTitle() {
      if (this.uploading) {
        return "正在上传";
      } else if (!this.mergeProgress.status) {
        return "正在合并";
      } else if (!this.unzipProgress.status) {
        return "正在部署";
      } else {
        return "";
      }
    },
    fileSize() {
      return (val) => {
        return formatBytes(val);
      };
    },
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val) {
        this.$emit("update:visible", val);
      },
    },
    visible(val) {
      this.dialogVisible = val;
    },
    deployFlag(val) {
      console.log("deployFlag", val);
      if (val) {
        this.$emit("refresh");
      }
    },
  },
  methods: {
    /**
     * @description: 选择UE工程文件
     * @return {*}
     */
    selectUefile(val) {
      const target = this.uefiles.find((item) => item.id == val);
      if (target) {
        this.formData.projectName = target.name;
      }
    },
    /**
     * @description: 关闭弹窗
     * @return {*}
     */
    close() {
      this.formData = {};
      this.$emit("update:visible", false);
      this.$emit("refresh");
    },

    /**
     * @description: 获取本地UE工程列表
     * @return {*}
     */
    getUefiles() {
      getLocalUefile().then((res) => {
        if (res.status) {
          this.tableData = [...res.data];
        }
      });
    },

    /**
     * @description: 手动部署
     * @return {*}
     */

    deploy(val) {
      if (this.deployFlag) {
        const fileName = val.name.split(".")[0];
        const data = {
          fileName: fileName || "ueproject",
          filePath: val.filePath,
        };
        this.deployUefile(data);
      } else {
        this.$notify({
          title: "警告",
          message: "请等待当前部署任务完成后再执行部署操作！",
          type: "warning",
        });
      }
    },
  },
  created() {
    this.getUefiles();
  },
};
</script>
<style lang="scss" scoped>
.auto {
  display: flex;
  justify-content: center;
  align-items: center;
}
.uploadMask {
  width: 400px;
  height: 100px;
  border: 2px dashed #333;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.uploadMask:hover {
  border: 2px dashed var(--theme-color);
  color: var(--theme-color);
}
.uploadInput {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.hand {
  width: 100%;
  height: 400px;
  overflow-y: auto;
}
.footer {
  margin-top: 20px;
  display: flex;
  gap: 50px;
}
.progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1;
}
</style>
